<!--
选择人员
value           =====>   双向数据绑定，v-model
multiple        =====>   是否允许多选
placeholder

-->
<template>
  <a-cascader
      :field-names="fieldNames"
      :placeholder="placeholder"
      :options="options"
      :multiple="multiple"
      show-checked-strategy="Cascader.SHOW_CHILD"
      v-model:value="defaultValue"
      @change="onChange"
  >
    <template #tagRender="data">
      <a-tag :key="data.value" color="blue">{{ data.label }}</a-tag>
    </template>

  </a-cascader>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'

const emit = defineEmits(['change', 'update:value'])
const props = defineProps({
  // 默认值
  value: {
    type: Array,
    default () {
      return null
    }
  },
  multiple: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '选择联系人'
  },
})
const fieldNames = ref({ label: 'label', value: 'value', children: 'children' })
const defaultValue = ref(null)
const options = ref([])

watch(() => props.value, (curr, old) => {
  defaultValue.value = curr
})

onMounted(() => {
  defaultValue.value = props.value
  options.value = [
    {
      value: 1,
      label: '总裁办',
      children: [
        {
          value: 2,
          label: '总台',
          children: [
            {
              value: 3,
              label: '人员一'
            },
            {
              value: 4,
              label: '人员二'
            }
          ]
        },
      ],
    },
    {
      value: 5,
      label: '业务部',
      children: [
        {
          value: 6,
          label: '市场部',
          children: [
            {
              value: 7,
              type: 'dep',
              label: '市场部的下级部门',
              children: [
                {
                  value: 8,
                  type: 'user',
                  label: '人员三'
                },
                {
                  value: 9,
                  label: '人员四'
                }
              ]
            },
          ],
        },
        {
          value: 10,
          type: 'dep',
          label: '商务部',
          children: [
            {
              value: 11,
              type: 'dep',
              label: '商务部的下级部门',
              children: [
                {
                  value: 12,
                  type: 'user',
                  label: '人员五'
                },
                {
                  value: 13,
                  type: 'user',
                  label: '人员六'
                }
              ]
            },
          ],
        },
      ],
    }
  ]
})

const onChange = (value,selectedOptions) => {
  // console.log(value, selectedOptions)
  emit('change', value, selectedOptions)
  emit('update:value', value)
}

</script>

<style scoped>

</style>
